<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
    request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html>
<html lang="en">
<head>

    <!-- start: Meta -->
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="Bootstrap Metro Dashboard">
    <meta name="author" content="">
    <meta name="keyword" content="">
    <!-- end: Meta -->

    <!-- start: Mobile Specific -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- end: Mobile Specific -->
    <base href="${basePath}/staticafter/">
    <!-- start: CSS -->
    <link id="bootstrap-style" href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet">
    <link id="base-style" href="css/style.css" rel="stylesheet">
    <link id="base-style-responsive" href="css/style-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,latin-ext'
          rel='stylesheet' type='text/css'>
    <!-- end: CSS -->


    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <link id="ie-style" href="css/ie.css" rel="stylesheet">
    <![endif]-->

    <!--[if IE 9]>
    <link id="ie9style" href="css/ie9.css" rel="stylesheet">
    <![endif]-->

    <!-- start: Favicon -->
    <link rel="shortcut icon" href="img/favicon.ico">
    <!-- end: Favicon -->


</head>

<body>
<!-- start: Header -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="container-fluid">
            <a class="btn btn-navbar" data-toggle="collapse"
               data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="index.html"><span>瀚海速达</span></a>

            <!-- start: Header Menu -->
            <div class="nav-no-collapse header-nav">

                <ul class="nav pull-right">

                    <!-- start: User Dropdown -->
                    <li class="dropdown">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="halflings-icon white user"></i>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="dropdown-menu-title">
                                <span>Account Settings</span>
                            </li>
                            <li><a href="#"><i class="halflings-icon user"></i> 个人档案</a></li>
                            <li><a href="login.html"><i class="halflings-icon off"></i> 登录</a></li>
                        </ul>
                    </li>
                    <!-- end: User Dropdown -->
                </ul>

            </div>
            <!-- end: Header Menu -->

        </div>
    </div>
</div>
<!-- start: Header -->

<div class="container-fluid-full">
    <div class="row-fluid">

        <!-- start: Main Menu -->

        <c:import url="left.jsp"></c:import>
        <!-- end: Main Menu -->

        <noscript>
            <div class="alert alert-block span10">
                <h4 class="alert-heading">Warning!</h4>
                <p>You need to have <a href="" target="_blank">JavaScript</a> enabled to use this site.</p>
            </div>
        </noscript>

        <!-- start: Content -->
        <div id="content" class="span10">


            <ul class="breadcrumb">
                <li>
                    <i class="icon-home"></i>
                    <a href="index.html">Home</a>
                    <i class="icon-angle-right"></i>
                </li>
                <li>
                    <i class="icon-edit"></i>
                    <a href="#">用户管理</a>
                </li>
            </ul>


            <!--表二开始-->
            <div class="row-fluid sortable">
                <div class="box span12">
                    <div class="box-header" data-original-title>
                        <h2><i class="halflings-icon white edit"></i><span class="break"></span>Form Elements</h2>
                        <div class="box-icon">
                            <a href="#" class="btn-setting"><i class="halflings-icon white wrench"></i></a>
                            <a href="#" class="btn-minimize"><i class="halflings-icon white chevron-up"></i></a>
                            <a href="#" class="btn-close"><i class="halflings-icon white remove"></i></a>
                        </div>
                    </div>
                    <div class="box-content">
                        <form class="form-horizontal" action="${basePath}/jspafter/insertstreet.action" method="post">
                            <fieldset>


                                <div class="control-group">
                                    <label class="control-label" for="">市区名称</label>
                                    <div class="controls">
                                        <select name="cityName" id="city">
                                            <c:forEach items="${list2}" var="cityAddress">
                                                <option value="${cityAddress.cityid}">${cityAddress.cityname}</option>
                                            </c:forEach>
                                        </select>
                                    </div>
                                </div>

                                <div class="control-group">
                                    <label class="control-label" for="">县区名称</label>
                                    <div class="controls">
                                        <select name="areaName" id="area" style="display: none">

                                        </select>
                                    </div>
                                </div>


                                <div class="control-group">
                                    <label class="control-label" for="">街道名称</label>
                                    <div class="controls">
                                        <select name="areaName" id="street" style="display: none">

                                        </select>
                                    </div>
                                </div>


                                <div class="form-actions">
                                    <button type="submit" class="btn btn-primary">提交</button>
                                    <button class="btn">撤销</button>
                                </div>
                            </fieldset>
                        </form>

                    </div>
                </div><!--/span-->

            </div><!--/row-->
            <!--表二结束-->


        </div><!--/.fluid-container-->

        <!-- end: Content -->
    </div><!--/#content.span10-->
</div><!--/fluid-row-->

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Settings</h3>
    </div>
    <div class="modal-body">
        <p>Here settings can be configured...</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

<div class="clearfix"></div>

<footer>

    <p>
        <span style="text-align:left;float:left">Copyright &copy; 2020.Company name All rights reserved.</span>

    </p>

</footer>


<!-- start: JavaScript-->

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.0.0.min.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/jquery.dataTables.min.js'></script>
<script src="js/excanvas.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.pie.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>
<script src="js/jquery.chosen.min.js"></script>
<script src="js/jquery.uniform.min.js"></script>
<script src="js/jquery.cleditor.min.js"></script>
<script src="js/jquery.noty.js"></script>
<script src="js/jquery.elfinder.min.js"></script>
<script src="js/jquery.raty.min.js"></script>
<script src="js/jquery.iphone.toggle.js"></script>
<script src="js/jquery.uploadify-3.1.min.js"></script>
<script src="js/jquery.gritter.min.js"></script>
<script src="js/jquery.imagesloaded.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.knob.modified.js"></script>
<script src="js/jquery.sparkline.min.js"></script>
<script src="js/counter.js"></script>
<script src="js/retina.js"></script>
<script src="js/custom.js"></script>

<script>
    $(function () {
        $('#city').change(function () {
            //省份更改后，城市，县城的情况都要被全部更新（先清除，再添加）

           /* $("#area").children().remove();     //去除原来的城市列表

            $("#street").children().remove(); */    //去除原来的县级列表
            var id = this.value;            //获取省份value作为城市的parent_id
            console.log("id"+id);
            var url = '${basePath}/jspafter/jfindbycityid.action';

            $.ajax({                            //jquery ajax
                type: 'post',
                url: url,
                data: {'id': id},

                success: function (data) {

                    var cityAddress = JSON.parse(data);
                    console.log(cityAddress);
                    //为了防止直辖市情况下，change条件无法触发
                    $("#area").append("<option value='请选择所在县区'>请选择所在县区</option>");
                    for (var i = 0; i < cityAddress.length; i++) {
                        /*循环添加所有城市列表*/
                        $("#area").append("<option value='" + cityAddress[i].areaid + "'>" + cityAddress[i].areaname + "</option>");
                        $("#area").css('display', 'inline');
                    }
                }
            });

        });
        /*同上*/
        $('#area').change(function () {
            //城市更改后，更新县级数据

            $("#street").children().remove();

            //这里的value不要和上面的重复，否则变量提升机制会覆盖掉前面的变量值
            var id= this.value;
            console.log("areadid"+id);
            var url = '${basePath}/jspafter/jfindbyareaid.action';

            $.ajax({                            //jquery ajax
                type: 'post',
                url: url,
                data: {'id': id},

                success: function (data) {

                    var streetAdderss = JSON.parse(data);
                    console.log(streetAdderss);
                    //为了防止直辖市情况下，change条件无法触发
                    $("#street").append("<option value='请选择所在县区'>请选择所在县区</option>");
                    for (var i = 0; i < streetAdderss.length; i++) {
                        /*循环添加所有城市列表*/
                        $("#street").append("<option value='" + streetAdderss[i].streetid + "'>" + streetAdderss[i].streetname + "</option>");
                        $("#street").css('display', 'inline');
                    }
                }
            });


        });
    });
</script>
</body>
</html>
